@extends('admin.readLayout')
@section('title','销售统计')
@section('content')
    <blockquote class="layui-elem-quote">销售统计</blockquote>
    <div>
        <div class="layui-inline">
            <input type="text" class="layui-input" style="width: 300px" id="datetime" name="searchTime" value="{{date('Y-m-d H:i:s',time()-86400)}} ~ {{date('Y-m-d H:i:s',time())}}" placeholder="日期范围搜索">
        </div>
        <button lay-filter="search" class="layui-btn" id="search" type="button"><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
    </div>
<hr/>
    <div class="layui-row">
        <div class="layui-col-md10 layui-col-lg-offset1">
            <div id="main" style="height: 500px;">

            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{asset('manger/plugins/zTree_v3/js/jquery-1.4.4.min.js')}}"></script>

    <script src="{{asset('manger/plugins/echarts/echarts.min.js')}}"></script>
    <!-- 引入 vintage 主题 -->
    <script src="{{asset('manger/plugins/echarts/theme/macarons.js')}}"></script>
    <script>
        // 第二个参数可以指定前面引入的主题
        var chart = echarts.init(document.getElementById('main'), 'macarons');
        var Page = {
            genrateOptions:function (title,data,xAxisData) {
                return {
                    title: {
                        text: title,
                        left: '50%',
                        textAlign: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#ddd'
                            }
                        },
                        backgroundColor: 'rgba(255,255,255,1)',
                        padding: [5, 10],
                        textStyle: {
                            color: '#7588E4',
                        },
                        extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                                readOnly: true,
                                title:'销售统计',
                                optionToContent: function(opt) {
                                    var axisData = opt.xAxis[0].data;
                                    var series = opt.series;
                                    var table = '<table class="layui-table"><tbody><tr>'
                                        + '<td>时间</td>'
                                        + '<td>金额</td>'
                                        + '</tr>';
                                    for (var i = 0, l = axisData.length; i < l; i++) {
                                        table += '<tr>'
                                            + '<td>' + axisData[i] + '</td>'
                                            + '<td>￥' + series[0].data[i] + '</td>'
                                            + '</tr>';
                                    }
                                    table += '</tbody></table>';
                                    return table;
                                },
                                contentToOption:function (opt) {
                                    Page.get();
                                }
                            },
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        right: 20,
                        orient: 'vertical',
                        data: ['今日','昨日']
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        boundaryGap: false,
                        splitLine: {
                            show: true,
                            interval: 'auto',
                            lineStyle: {
                                color: ['#D4DFF5']
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#609ee9'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name:'金额（￥）',
                        splitLine: {
                            lineStyle: {
                                color: ['#D4DFF5']
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#609ee9'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14
                            },
                            formatter: '￥{value} '
                        }
                    },
                    series: [{
                        name: '金额（￥）',
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        symbol: 'circle',
                        symbolSize: 6,
                        data: data,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(216, 244, 247,1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(216, 244, 247,1)'
                                }], false)
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#58c8da'
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 3
                            }
                        }
                    }]
                };

            },
            get:function (_renderLoad) {
                var _url = '{{route('admin.report.sale')}}';
                $.get(_url,{
                        'searchTime':$('#datetime').val(),
                        'do':'list'
                    },
                    function (e) {
                        var data = [];
                        var xAxisData = [];
                        for(var i in e.data){
                            data.push(e.data[i].price);
                            xAxisData.push(e.data[i].date)
                        }
                        var options =  Page.genrateOptions(e.title,data,xAxisData);
                        chart.setOption(options);
                        layer.close(_renderLoad);

                    },
                    'json')
            }
        };
    </script>
    <script>
        //时间日期
        layui.use('laydate',function(){
            var laydate=layui.laydate;
            laydate.render({
                elem: '#datetime'
                ,type: 'datetime'
                ,range: '~'
            });
        });
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element','jquery','layer'], function(){

            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.jquery;
            var _renderLoad = layer.msg('正在努力计算中，请稍候',{icon: 16,time:false,shade:0.8});
            Page.get(_renderLoad);
            $(document).on('click','#search',function () {
                _renderLoad = layer.msg('正在努力计算中，请稍候',{icon: 16,time:false,shade:0.8});
                Page.get(_renderLoad);
            })
            //…
        });
    </script>
@endsection